﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>公告添加</title>
		<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
		<link rel="stylesheet" href="../css/bootstrap-3.3.7-dist/css/bootstrap.css">
		<link rel="stylesheet" href="../css/body.css"/>
		
		
		<script src="../js/jQuery.js"></script>
		<script src="../css/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
		<script src="../js/index.js"></script>
		<script src="../js/wangEditor.min.js"></script>
		<style>
			
		</style>
	</head>
	<body>
		<!--首页初始导航条-->
		<nav class="navbar navbar-inverse navbar-fixed-top">
			<div class="container">
				<div class="navbar-header">
					<span class="navbar-brand logo1">川农车辆预约系统</span>
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#m1">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div>
				<div class="navbar-collapse collapse" id="m1">
					<ul class="nav navbar-nav navbar-left">
						<li class="active">
							<a href="../index/index.html"><span class="glyphicon glyphicon-home"></span>&nbsp;首页</a><!--这里的span是设置bootstrap字体图标类-->
						</li>
						
						<!--长期车辆申请菜单-->
						<!--<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								长期车辆申请
								<b class="caret"></b>
							</a>
							<ul class="dropdown-menu">
								<li>
									<a href="../index/fileDownload.html">表单下载</a>
								</li>
								<li>
									<a href="../index/longResults.html">结果公示</a>
								</li>
							</ul>
						</li>-->
					</ul>
					
					<ul class="nav navbar-nav navbar-right" id="loginWho">
						<li><a href="../index/login.html">登陆</a></li>
					</ul>
				</div>
			</div>
		</nav>
		
		<!--
			文章添加
        -->
		<div class="container" style="margin-top: 10px;">
			<form class="" id="articleAdd">
				<div class="form-group">
					<label>
						文章标题
					</label>
					<input type="text" name="title" value="" class="form-control" placeholder="请输入文章名称" id="article_title" />
				</div>
				<div class="form-group">
					<label>
						文章详情
					</label>
					<div id="editor" name="content">
					</div>
					<!-- <textarea class="form-control" rows="10" name="content" id="article_content" placeholder="请输入文章内容"></textarea> -->
				</div>
				<input type="button" class="btn btn-primary" value="创建" onclick="chuan_article()" />
			</form>
		</div>
		<script type="text/javascript">

		var E = window.wangEditor
		var editor = new E('#editor'); // 两个参数也可以传入 elem 对象，class 选择器
		editor.customConfig.zIndex = 100
		editor.customConfig.uploadImgShowBase64 = false // 使用 base64 保存图片
		// 配置服务器端地址
		
		console.log(editor.customConfig)
		editor.customConfig.uploadImgHeaders = {'token': '853bf0fadd434c68a003748da81e6449' }
		editor.customConfig.uploadImgServer = 'https://carorder.sicau.edu.cn/adminCar/uploadImage'
		// 将图片大小限制为 15M
		editor.customConfig.uploadImgMaxSize = 15 * 1024 * 1024;
		// 自定义上传参数
		editor.customConfig.uploadFileName = 'imgFile'
		editor.customConfig.uploadImgHooks = {
			before : function(xhr, editor, files) {
				// 图片上传之前触发
				// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
 
				// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
				// return {
				//     prevent: true,
				//     msg: '放弃上传'
				// }
			},
			success : function(xhr, editor, result) {
				// 图片上传并返回结果，图片插入成功之后触发
				// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
			},
			fail : function(xhr, editor, result) {
				// 图片上传并返回结果，但图片插入错误时触发
				// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
			},
			error : function(xhr, editor) {
				// 图片上传出错时触发
				// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
			},
			timeout : function(xhr, editor) {
				// 图片上传超时时触发
				// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
			},
 
			// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
			// （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
			customInsert : function(insertImg, result, editor) {
				// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
				// insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
 
				// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
				var url = result.url
				insertImg(url)
				
				// result 必须是一个 JSON 格式字符串！！！否则报错
			}
		}
       // 必须放到有关于编辑器设置前面
		editor.create()
 

			// var E = window.wangEditor
			// var editor = new E('#editor')
			// // 或者 var editor = new E( document.getElementById('editor') )
			// editor.create()
			function chuan_article(){
				var formData = $("#articleAdd").serializeJson();
				// var editor = $("#editor");
				// console.log(editor[0].inner);
				// var content = editor[0].innerText.replace(/\r{0,}\n/g, '<br/>').replace(/\s/g, '&nbsp;');
				// console.log(content);
				content = editor.txt.html();
				console.log(content)
				$.ajax({
					type: "POST",
					url: "https://carorder.sicau.edu.cn/adminCar/addNotice",
					beforeSend: function (xhr) {
						xhr.setRequestHeader("token", sessionStorage.token);
					},
					dataType: "text", //后台返回格式问题
					data:{
						title: formData.title,
						notice: content,
					},
					success: function(data) {
						alert("公告创建成功!");
						window.location.reload();
					},
					error: function(data) {
						alert("公告创建失败！请检查网络或者重新登陆！");
						window.location.reload();
					}
				});
			}
		</script>
		
	</body>

</html>